import React, { memo, useContext, useState } from "react";
import { Input, Button } from "antd-mobile";
import shopContext from "../context/shopContext";
import { Card } from "antd-mobile";
import { Checkbox } from "antd-mobile";

const Home = memo(() => {
  let { list, getOne, addOne, delOne, Screen } = useContext(shopContext);
  const tabs = ["全部", "已选中", "未选中", "回收站"];
  // 控制删选高亮的状态
  const [active, setActive] = useState(0);
  // 顶部输入框的值
  const [val, setVal] = useState("");
  // 复选框状态改变的函数
  const checkOne = (id) => {
    getOne(id);
  };
  // 添加一条数据的函数
  const addV = () => {
    addOne(val);
    setVal("");
  };
  // 删除一条数据
  const del = (id) => {
    delOne(id);
  };
  // 筛选高亮的函数
  const shai = (index) => {
    setActive(index);
    Screen(index);
  };
  return (
    <div>
      <div>
        <Input
          placeholder="请输入内容"
          clearable
          value={val}
          onChange={(v) => setVal(v)}
        />
        <Button color="primary" fill="solid" onClick={() => addV()}>
          确定添加
        </Button>
      </div>

      <div>
        {list.map((item, index) => {
          return (
            <Card title={item.title} key={item.id}>
              <Checkbox
                checked={item.isDone}
                onChange={() => checkOne(item.id)}
              ></Checkbox>

              <button onClick={() => del(item.id)}>删除</button>
            </Card>
          );
        })}
      </div>
      <div>
        {tabs.map((item, index) => {
          return (
            <Button
              color="primary"
              fill={index === active ? "solid" : "outline"}
              key={index}
              onClick={() => shai(index)}
            >
              {item}
            </Button>
          );
        })}
      </div>
    </div>
  );
});

export default Home;
